<template>
  <div class="c-bg-sgray">
    <audio id="audio" @ended="playAudioEnd" class="c-pf c-p-l-100"></audio>
    <div class="c-pt60 c-flex-column c-justify-sa c-h" v-if="homeWorkInfo && (!refereeAndUser&&!homeWorkInfo.isTeacher)&&homeWorkInfo.myResult.enableShow2==0">
      <loading-status-tem :noDataText="'暂无私密打卡查看权限'" :noData="true"></loading-status-tem>
      <div class="c-mh72 c-fs28 c-fc-white theme-bg c-pv16 c-flex-row c-justify-center c-br36" @click="clickGohomeworke">了解打卡</div>
    </div>
    <div v-else>
      <div class="c-bg-white c-br8 c-pt20 c-pb20" v-if="homeWorkInfo">
        <div class="c-flex-row c-ph40 c-aligni-center">
          <img class="c-ww60 c-hh60 c-brp50" :src="$addXossFilter(homeWorkInfo.myResult.headimgurl, require('@/assets/defult_head.png'))" alt="" />
          <div class="c-pl20 c-flex-grow1 c-w0 c-flex-row c-aligni-center">
            <div class="c-flex-grow1 c-flex-column c-justify-center c-aligni-start">
              <div class="c-fs24 c-flex-row c-aligni-center">
                <span class="c-pr20 c-text-ellipsis1 c-ww180">{{
                  homeWorkInfo.myResult.nickname
                }}</span>
              </div>
              <div class="c-fs24 c-flex-row c-aligni-center">
                <!-- <div v-if="
                  (homeWorkInfo.type == 1||homeWorkInfo.type == 4) && homeWorkInfo.myResult.rank !== null && homeWorkInfo.myResult.rank !== 0
                " class="c-flex-row c-flex-center">
                  <img v-for="index in 5" :key="index" class="c-ww24 c-hh24 c-mr4" :src="
                    index <= homeWorkInfo.myResult.rank
                      ? require('@/assets/i/wap/clockIn/star_s.png')
                      : require('@/assets/i/wap/clockIn/star_d.png')
                  " alt="" />
                </div> -->
                <!-- <div v-if="
                  (homeWorkInfo.type == 1||homeWorkInfo.type == 4) && homeWorkInfo.myResult.rank !== null && homeWorkInfo.myResult.rank !== 0
                " class="c-flex-shrink0 theme-fc c-pl10 c-pr10">{{ homeWorkInfo.myResult.rank * 20 }}分</div> -->
                <div class="c-fs18 c-fc-gray c-flex-row c-aligni-center">
                  <span v-if="workType == 1">
                    已打卡{{ homeWorkInfo.myResult.finishNum }}天</span>
                  <span v-else-if="workType == 2">
                    已完成{{ homeWorkInfo.myResult.finishNum }}个作业</span>
                  <span v-else>
                    已打卡{{ homeWorkInfo.myResult.finishNum }}个课时</span>
                <!-- <span @click="clickTestAgain" v-if="(homeWorkInfo.isTeacher==0||homeWorkInfo.isTeacher==2)&&(
                  ((homeWorkInfo.isDisAgainSign && workType == 3) ||
                    (homeWorkInfo.isDisAgainSign && homeWorkInfo.isExpire == 1)))&&refereeAndUser
                " class="c-fs18 c-fc-sorange c-pl20">重测</span> -->
                </div>
              </div>
            </div>
            <div class="c-flex-column c-aligni-center c-flex-center" @click="goSpread" v-if="refereeAndUser&&!clockInInfo.isFriendHelper && !clockInInfo.collage && clockInInfo.sales == null && clockInInfo.bargain == null">
              <i class="iconfont c-fc-sblack c-fs28">&#xe89e;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">邀请好友</div>
            </div>
            <div v-if="homeWorkInfo.isOpenLongPic==1" class="c-flex-column c-aligni-center c-flex-center c-ml40" @click="clickBuildImg">
              <i class="iconfont c-fc-sblack c-fs28">&#xe745;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">长图</div>
            </div>
            <div v-if="refereeAndUser&&((homeWorkInfo.isDisAgainSign)||(homeWorkInfo.isAnalyze && homeWorkInfo.myResult.type == 1)|| homeWorkInfo.myResult.enableDelete == 1)" class="c-flex-column c-aligni-center c-flex-center c-ml40" @click.stop="calcOperation(homeWorkInfo,index)">
              <i class="iconfont c-fc-sblack c-fs28">&#xe8a6;</i>
              <div class="c-fc-sblack c-fs18 c-mt2">更多</div>
            </div>
          </div>
        </div>
      </div>
      <div class="c-pl24 c-pr24 c-mt20 c-pb20" v-if="homeWorkInfo">
        <div class="c-bg-white c-br20 c-text-hidden">
          <clock-aswer-content class="c-bg-white c-pb40" @clickZan="clickZan" @clickCom="clickCom" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" :playAduioSrc="playAduioSrc" :homeworkType="homeWorkInfo.myResult.type"
            :aswerInfo="homeWorkInfo.myResult" :aswerIndex="homeWorkInfo.curUserId==homeWorkInfo.userId?-1:index" :isTeacher="homeWorkInfo.isTeacher">
          </clock-aswer-content>
        </div>
      </div>
      <section class="c-flex-row c-ph24 c-aligni-center c-justify-sb c-bd-t1 c-hh88 c-pf c-p-b0 c-w100 c-maxw640 c-bg-white c-pz1">
        <div v-if="ttId && campButtonStatus && campButtonStatus.campPermission && !campButtonStatus.isTeacher" class="c-flex-grow1 c-hh64 c-fs24 c-flex-row c-aligni-center c-justify-sb c-w0 c-flex-grow1 c-bd1-ccc c-br32 c-text-hidden">
          <div @click="handleCampDirectory(0)" class="c-textAlign-c c-hh64 c-lh64 c-w28 c-bd-r1-ccc">目录</div>
          <div @click="handleCampDirectory(-1)" :class="[campButtonStatus && campButtonStatus.isPrev ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-bd-r1-ccc"><span v-show="campButtonStatus.isPrev && !campButtonStatus.isPrevUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>上一任务</div>
          <div @click="handleCampDirectory(1)" :class="[campButtonStatus && campButtonStatus.isNext ? 'c-fc-xblack' : 'c-fc-sgray']" class="c-textAlign-c c-hh64 c-lh64 c-w36 c-br-tr32 c-br-br32"><span v-show="campButtonStatus.isNext && !campButtonStatus.isNextUnlock" class="iconfont c-mr4 c-fs24">&#xe7a5;</span>下一任务</div>
        </div>
        <div v-else @click="clickGohomeworke" class="theme-bg c-flex-grow1 c-hh64 c-fs26 c-br36 c-text-hidden c-w0 c-fc-white c-h c-flex-row c-flex-center">返回主页</div>
      </section>
      <div v-if="ttId && campButtonStatus && campButtonStatus.campPermission && !campButtonStatus.isTeacher" class="c-pf c-p-r0 c-p-b300 c-flex-row c-justify-center c-aligni-center theme-bg c-pl16 c-pv10 c-pr12 c-br-tl24 c-br-bl24" @click="clickGohomeworke">
        <div class="c-fs20 c-fc-white c-ml4">返回主页</div>
      </div>
    </div>
    <!-- 训练营目录 -->
    <campDirectoryDialog v-if="ttId" ref="campDirectory"></campDirectoryDialog>
    <!-- 视频播放器 -->
    <video-popup :showVideo="showVideo" @clickCloseVideo="clickCloseVideo" :videoSrc="currentVideoObj.videoSrc" :m3u8Url="currentVideoObj.m3u8Url"></video-popup>
    <!-- 教师评论(评分和设置精选) -->
    <clock-tea-comment-com :enHwId="enHwId" :clockInId="clockInId"
      :enDate="enDate" :teacher="1" :enableLongAudio='enableLongAudio' :playAduioSrc="playAduioSrc" :showTeaCommentModal="showTeaCommentModal" :workType="workType" :resultIndex="resultIndex" :resultInfo="resultInfo" :imgData="imgData"
      @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @clickShowVideo="clickShowVideo" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-tea-comment-com>
    <!-- 非教师评论 -->
    <clock-comment-com :enHwId="enHwId" :clockInId="clockInId"
      :enDate="enDate" :enableLongAudio='enableLongAudio' @clickShowVideo="clickShowVideo" :comType="comType" :isTeacher="homeWorkInfo.isTeacher" :playAduioSrc="playAduioSrc" :showCommentModal="showComInput" :inputCom="inputCom" :replyName="replyName"
      :curComId="curComId" :replyId="replyId" :imgData="imgData" @commentSuccess="commentSuccess" @clickPlayAudio="clickPlayAudio" @cleanPlayAudioUrl="cleanPlayAudioUrl"></clock-comment-com>
    <!-- 简答题长图 -->
    <!-- 简答题长图 -->
    <div class="anvasBox">
      <div class="anvasContent anvasContentbg" id="canvas1" :style="longImgBgUrl">
        <div v-if="homeWorkInfo.myResult&&homeWorkInfo.myResult.type==1" style="padding-top:42px;padding-bottom:40px">
          <!-- <img class="c-pa img-pe-none" :src="require('@/assets/i/wap/clockIn/teaHeadBg.png')" alt style="top:71px;left:30px;right:30px"> -->
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.myResult.headimgurl" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.myResult.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.myResult.createdAt}}</div>
            </div>
          </div>
          <div>
            <div class="c-center" style="width: 440px;">
              <div class="c-bg-white c-p" style="border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
                <div class="c-fc-xblack c-textAlign-j c-center" style="font-size:24px;line-height:38px;padding-bottom:22px;width: 400px;">
                  <div v-for="(cItem,cIndex) in content.split('\n')" :key="cIndex">{{cItem}}</div>
                </div>
                <div class="" v-if="homeWorkInfo.myResult.audioArr&&homeWorkInfo.myResult.audioArr.length>0" style="padding-left:16px;padding-right:16px;padding-bottom: 20px;">
                  <!-- 语音回答 -->
                  <div class="theme-bg-10 c-flex-row c-aligni-center" v-for="(item,index) in homeWorkInfo.myResult.audioArr" :key="index" v-if="index==0" style="margin:0 4px 0px;height:52px;border-radius: 26px;padding-left:8px;padding-right:8px;">
                    <!-- <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc != item.url" src="@/assets/i/wap/course/chat_right_play.png" alt="" />
                    <img class="c-ww30 c-hh30 c-rotate180" v-show="playAduioSrc == item.url" src="@/assets/i/wap/course/chat_right_play.gif" alt="" /> -->
                    <div class="box" style="width: 32px;">
                      <div class="iconfont theme-fc" style="font-size:24px;padding-bottom:16px">&#xe738;</div>
                    </div>
                    <div class="theme-fc" style="font-size: 20px;padding-bottom:16px">录音总时长{{totalTime(homeWorkInfo.myResult.audioArr)}}</div>
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.myResult.videoArr&&homeWorkInfo.myResult.videoArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <div class="c-text-hidden c-p" v-for="(item,index) in homeWorkInfo.myResult.videoArr" :key="index" v-if="index<3" style="margin:0 4px 20px;width:128px;height:80px;border-radius: 20px;">
                    <img class="img-pe-none" :src="item.videoCover?item.videoCover:'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png'" alt style="width:128px;height:80px">
                    <div v-if="item.videoCover" class="img-play-btn c-flex-column c-aligni-center c-flex-center" style="border-radius: 20px;">
                      <i class="iconfont c-fs40 c-fc-white">&#xe869;</i>
                    </div>
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.myResult.imgArr&&homeWorkInfo.myResult.imgArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <div class="c-text-hidden" v-for="(item,index) in homeWorkInfo.myResult.imgArr" :key="index" style="margin:0 4px 20px;width:128px;height:128px;border-radius: 20px;">
                    <img class="img-pe-none" :src="item.url" alt style="width:128px;height:128px">
                  </div>
                </div>
                <div class="c-flex-row c-flexw-wrap" v-if="homeWorkInfo.myResult.filesArr&&homeWorkInfo.myResult.filesArr.length>0" style="padding-left:16px;padding-right:16px;">
                  <!-- 文档回答 -->
                  <div v-for="(item,index) in homeWorkInfo.myResult.filesArr" :key="index" v-if="index==0" class="c-bg-F6F7F9" style="border-radius: 20px;padding: 20px;margin-bottom: 20px;">
                    <div class="c-flex-row c-aligni-center">
                      <div>
                        <img style="width: 64px;height: 64px;border-radius: 20px;" :src="$addXossFilter(officeIconImg[item.type])" alt="" />
                      </div>
                      <div class="c-fc-xblack" style="font-size: 24px;width: 280px;margin-left: 16px;padding-bottom:16px">
                        {{item.name.length>20?item.name.substring(0, 20)+'...':item.name}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- line -->
              <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-2px">
                <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
              </div>
              <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
                <div class="c-flex-row c-alignc-center c-flex-center">
                  <div style="width:88px;"><img :src="homeWorkInfo.myResult.qrCodeUrl" alt=""></div>
                  <div class="c-flex-grow1" style="margin-left:18px">
                    <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.myResult.name}}</div>
                    <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else-if="homeWorkInfo.myResult&&homeWorkInfo.myResult.type==4" style="padding-top:42px;padding-bottom:40px">
          <div class="c-flex-row c-alignc-center" style="padding-bottom: 30px;width: 440px;margin:0 auto;">
            <div class="c-brp50 c-text-hidden c-pz1" style="width:70px;height:70px;border:2px solid #fff;margin-right:20px">
              <img :src="homeWorkInfo.myResult.headimgurl" alt="" style="width:70px;height:70px;">
            </div>
            <div>
              <div :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-fw600" style="font-size:24px;width: 240px;margin:0 auto;">
                {{homeWorkInfo.myResult.nickname}}
              </div>
              <div  :class="longImgBg==3||longImgBg==4||longImgBg==5?'c-fc-white':'c-fc-xblack'" class="c-center" style="margin-top:12px;font-size:20px;letter-spacing: 1.5px;;width: 240px;">{{homeWorkInfo.myResult.createdAt}}</div>
            </div>
          </div>
          <div>
            <div class="c-center" style="width: 440px;">
              <div class="c-bg-white c-p" style="border-top-left-radius: 20px;border-top-right-radius: 20px;padding-top: 40px;margin-top:-1px">
                <div class="c-flex-row c-flexw-wrap" style="padding-left:16px;padding-right:16px;">
                  <!-- 文档回答 -->
                  <div class="c-bg-F6F7F9" style="border-radius: 20px;padding: 20px;margin-bottom: 20px;">
                    <div class="c-flex-row c-aligni-center">
                      <div>
                        <img style="width: 64px;height: 64px;border-radius: 20px;" :src="require('@/assets/i/wap/clockIn/form.png')" alt="" />
                      </div>
                      <div class="c-fc-xblack" style="font-size: 24px;width: 280px;margin-left: 16px;padding-bottom:16px">
                        {{homeWorkInfo.homeWorkName}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- line -->
              <div class="c-flex-row c-aligni-center c-justify-sb" style="margin-top:-2px">
                <img :src="require('@/assets/i/wap/clockIn/dashed.png')" alt="">
              </div>
              <div class=" c-bg-white" style="border-bottom-left-radius:20px;border-bottom-right-radius:20px;padding:18px 24px;margin-top:-2px">
                <div class="c-flex-row c-alignc-center c-flex-center">
                  <div style="width:88px;"><img :src="homeWorkInfo.myResult.qrCodeUrl" alt=""></div>
                  <div class="c-flex-grow1" style="margin-left:18px">
                    <div class="c-fc-gray c-wordBreakAll" style="margin:0 auto;font-size:18px;width:294px;letter-spacing: 2px;">来自{{homeWorkInfo.myResult.name}}</div>
                    <div class="c-fc-white c-textAlign-c c-fw600 theme-bg" style="line-height: 10px;height:30px;width:242px;font-size:18px;margin-top:12px;border-radius: 15px;padding:4px 12px;letter-spacing: 2px;">识别二维码，查看详情</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 长图展示 -->
    <div v-show="isShowMasker" class="c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100">
      <div class="c-translucent-balck60 c-h c-w100 c-pa c-p-t0 c-p-l0"></div>
      <article class="c-textAlign-l  c-pf c-p-tp50 c-p-tp50 c-translate-y-50 c-p-l0 c-p-r0 c-m-0auto c-ww500">
        <!-- <div class="iconfont c-fs36 c-fc-white c-pa c-pz10 c-p-tm12 c-p-rm12" @click="closeShowMasker">&#xe84e;</div> -->
        <div id="loneSpreadImg" class="c-maxhlongImg c-contexty-scroll c-pb160">
          <img @click="clickImg(event)" class="c-ww500 c-m-0auto c-br20" alt>
        </div>
      </article>
      <div class="c-bg-white c-bd-t1 c-w100 c-ph24 c-pt30 c-pb20 c-br-tr20 c-br-tl20 c-hh260 c-pa c-p-b0">
        <div class="c-w100 c-p">
          <i class="iconfont c-fc-gray c-fs18 c-pa c-p-r0 c-p-t0" @click.stop="closeShowMasker">&#xe61b;</i>
          <div class="c-pb30  c-br24 c-fs24 c-flex-center c-flex-row c-m-0auto c-mt12 c-fc-sblack c-fw600">长按上面图片保存海报</div>
          <div id="scroll" class="c-contexty-hidden c-contextX-scroll c-ws-n" style="overflow: auto;">
            <!--  -->
            <div class="c-p c-mr20 c-inlineblack c-text-hidden c-br10" :class="longImgBg==index?'theme-bd2 c-ww104 c-hh108':'c-ww84 c-hh88'" v-for="(item,index) in smallImg" :key="index" @click="chooseImgbg(index)">
              <img :src="item.url" alt="" class="c-h c-w100 img-pe-none c-object-fit-cover">
              <div class="c-flex-row c-flex-center c-pa c-p-b6 c-p-r6 c-brp50 c-ww32 c-hh32 theme-bg c-bd2-white" v-show="longImgBg==index">
                <i class="iconfont c-fc-white c-fs20">&#xe76c;</i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 日签 -->
    <day-sign ref="daysign" :showSignDay="showSignDay" :signDayInfo="signDayInfo" @closeSignDay="closeSignDay" @canvasOver="canvasOver"></day-sign>
    <cj-actionsheet v-model="myOperationShow" :item-list="operationMenu" @choose="clickOperationMenu" show-cancel></cj-actionsheet>
  </div>
</template>


<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
import clockAswerContent from "@/components/templates/clockIn/clockAswerContent.vue";
import clockCommentCom from "@/components/templates/clockIn/clockCommentCom.vue";
import clockTeaCommentCom from "@/components/templates/clockIn/clockTeaCommentCom.vue";
import videoPopup from "@/components/templates/common/videoPopup.vue";
import DaySign from "./daySign.vue";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import campDirectoryDialog from "@/components/templates/common/campDirectoryDialog.vue";

let curHwId = ""; //当前作业ID
let clockInId = ""; //当前作业ID
let hasRead = ''; //推送来源
let curComIndex = '';//当前评论的下标
let isLoading = false;
let html2canvas = null;
let getInfo = true
const OFFICE_IMG_MAP = {
  'doc': require('@/assets/i/wap/clockIn/icon_word.png'),
  'docx': require('@/assets/i/wap/clockIn/icon_word.png'),
  'xls': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'xlsx': require('@/assets/i/wap/clockIn/icon_excel.png'),
  'ppt': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pptx': require('@/assets/i/wap/clockIn/icon_ppt.png'),
  'pdf': require('@/assets/i/wap/clockIn/icon_pdf.png'),
  'txt': require('@/assets/i/wap/clockIn/icon_txt.png'),
};
export default {
  name: "shortAnswerResult",
  components: {
    clockAswerContent,
    clockCommentCom,
    clockTeaCommentCom,
    videoPopup,
    DaySign,
    loadingStatusTem,
    campDirectoryDialog
  },
  watch: {
    '$route'() {
      // 路由变化时重新初始化数据
      this.initLoadData()
    }
  },
  beforeRouteLeave(to, from, next) {
    //当有评论弹窗的时候，后退就关闭弹窗,因为后退会把history历史栈后退一个，所以要添加回去
    if (
      (this.showComInput || this.showTeaCommentModal || this.showVideo) &&
      to.path != "/" &&
      to.path != "/homePage/spread/spreadIndex" &&
      to.path != "/member/vip/vipUpNew"
    ) {
      this.showComInput = false;
      this.showTeaCommentModal = false;
      if (this.showVideo) {
        this.showVideo = false;
      }
      history.pushState(
        null,
        null,
        `${window.location.href.split("#")[0]}#${from.fullPath}`
      );
    } else {
      next();
    }
  },
  data() {
    return {
      homeWorkInfo:'',
      curSelectDate:'',
      ttId:'',
      tpId:'',
      tlId:'',
      ckFrom:'',
      enHwId:'',
      enDate :'',
      playAduioSrc:'',
      showVideo:false,
      curComId: "", ///当前评论ID
      comType: 1, //是否教师评论教师
      replyId: "", //回复人的昵称
      inputCom: "", //评论的输入内容
      replyName: "", //回复人的ID
      showComInput: false, //显示评论输入框
      showTeaCommentModal: false, //显示教师评论输入框
      imgData: {},
      isTraining:'',
      clockInInfo:'',
      isShowMasker:false,
      refereeId:'',
      isShare:false,
      workType:'',
      userId:localStorage.getItem("userId"),
      content:'',
      currentVideoObj: {},
      isCanvasOver:false,
      showSignDay:false,
      signDayInfo: {}, //日签信息
      bindPhoneSetting: null,
      myOperationShow: false,
      operationMenu: {},
      operationMenuLength: 0,
      clockInId:0,
      officeIconImg: OFFICE_IMG_MAP,
      smallImg: [
        {'url': require('@/assets/i/wap/clockIn/small1.png')},
        {'url': require('@/assets/i/wap/clockIn/small2.png')},
        {'url': require('@/assets/i/wap/clockIn/small3.png')},
        {'url': require('@/assets/i/wap/clockIn/small4.png')},
        {'url': require('@/assets/i/wap/clockIn/small5.png')},
        {'url': require('@/assets/i/wap/clockIn/small6.png')},
        {'url': require('@/assets/i/wap/clockIn/small7.png')},
      ],
      biglImg: [
        {'url': require('@/assets/i/wap/clockIn/big1.png')},
        {'url': require('@/assets/i/wap/clockIn/big2.png')},
        {'url': require('@/assets/i/wap/clockIn/big3.png')},
        {'url': require('@/assets/i/wap/clockIn/big4.png')},
        {'url': require('@/assets/i/wap/clockIn/big5.png')},
        {'url': require('@/assets/i/wap/clockIn/big6.png')},
        {'url': require('@/assets/i/wap/clockIn/big7.png')},
      ],
      longImgBgUrl:'',
      longImgBg: 0,
      isDisCheat:0,
      enableLongAudio:0,
      campButtonStatus: {}, // 当前课程是否有上下节
    };
  },

  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas-1.4.1.js").then(res => {
      html2canvas = res.default;
    })
    if (document.getElementById("audio")) {
      document.getElementById("audio").src = "";
    }


    //获取阿里云签名，除了微信浏览器以外
    if (!utilJs.isWeiXin()) {
      utilJs.getAliSign(`${global.apiurl}imageSign`, (res) => {
        this.imgData = res;
      });
    }
    this.initLoadData()

  },
  computed:{
//是否分享入口进入，refereeId与userId相等
    refereeAndUser:function() {
      if ((this.isShare && (this.refereeId == this.userId)) || !this.isShare) {
        return true
      } else {
        return false
      }
    }
  },
  activated() {

  },
  methods: {
    initLoadData() {
      curHwId = this.$route.query.curHwId || 0;
      clockInId = this.$route.query.clockInId || "";
      this.clockInId = this.$route.query.clockInId || "";
      hasRead = this.$route.query.hasRead || "";
      curComIndex = "";
      this.curSelectDate = this.$route.query.curSelectDate || "";
      this.ttId = this.$route.query.ttId || "";
      this.tpId = this.$route.query.tpId || "";
      this.tlId = this.$route.query.tlId || "";
      this.ckFrom = this.$route.query.ckFrom || "";
      this.workType = this.$route.query.workType
      this.refereeId = this.$route.query.refereeId || '';
      this.isShare = this.$route.query.isShare || false;
      this.examMainId = this.$route.query.examMainId || '';
      this.playAduioSrc = "";
      this.longImgBg = 0
      this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ")"
      this.isTraining = this.$route.query.isTraining || ""; //仅训练营进入闯关中间关卡可以获取详情
      isLoading = false;
      this.content = ''
      this.curComId = "" ///当前评论ID
      this.showSignDay = false;
      this.currentVideoObj = {};
      getBindPhoneSetting(global.ckFrom.clockIn).then(res => {
        this.bindPhoneSetting = res;
    });
      if (this.workType == 1) {
        this.getCalendarHomeWork();
      } else {
        this.getHomeWorkDatail();
      }
    this.getClockInDatail()
    this.getBaseConfig()
      this.campDirectoryInitData()
    },
    // 初始化训练营底部目录栏数据
    campDirectoryInitData() {
      this.$nextTick(() => {
        if (this.isLoading) {
          return;
        }
        this.isLoading = true;
        if (!!this.ttId && this.$refs.campDirectory) {
          this.$refs.campDirectory.initData({
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId
          }).then((data) => {
            this.isLoading = false;
            this.campButtonStatus = data
          }).catch(() => {
            this.isLoading = false;
          })
        }
      })
    },
    handleCampDirectory(type) { // type  0查看目录弹窗  -1上一节  1下一节
      if (this.$refs.campDirectory) {
        this.$refs.campDirectory.handleCampDirectory(type)
      }
    },
    getBaseConfig() {
      let postUrl = `${global.apiurl}signCard/getBaseConfig?signColId=${clockInId}`;
      utilJs.getMethod(postUrl, (res) => {
        this.isDisCheat = res.isDisCheat
        this.enableLongAudio = res.enableLongAudio
      });
    },
    //时间转换成"形式
    changeTimeStr(timeStr) {
      return utilJs.timeTmpToNsTime(timeStr)
    },
    totalTime(uploadAudioList) {
      let totalTime = 0
      for (let item in uploadAudioList) {
        totalTime = totalTime + uploadAudioList[item].time
      }
      return utilJs.timeTmpToStrTime(totalTime)
    },
    chooseImgbg(index) {
      this.longImgBg = index
      this.longImgBgUrl = 'background-image: url(' + this.biglImg[this.longImgBg].url + ");"
      this.$nextTick(() => {
        this.clickBuildImg()
      });
    },
    clickOperationMenu(item, key) {
      if (item.value == 0) {
        this.clickTestAgain()
      }
      if (item.value == 1) {
        this.clickLookAswer()
      }
      if (item.value == 2) {
        this.clickeDelete()
      }
    },
    showOprationSheet(index) {
      this.myOperationShow = true
    },
    clickeDelete(index) {
      this.$cjConfirm({
        title: '提示',
        message: '删除后无法恢复，确定删除日记?',
        onConfirm:() => {
          utilJs.postMethod(
            global.apiurl + "signCard/deleteExamLog",
            { examMainId:this.homeWorkInfo.myResult.examMainId },
            res => {
              if (this.workType == 1) {
                this.getCalendarHomeWork();
              } else {
                this.getHomeWorkDatail();
              }
              if (document.getElementById("audio")) {
                document.getElementById("audio").src = "";
              }
            },
          );
        }
      })
    },
    calcOperation(item, index) {
      let temObj = []
      if ((item.isDisAgainSign)) {
        temObj.push({name:'重测', value:0})
      }
      if (item.isAnalyze && item.myResult.type == 1) {
        temObj.push({name:'查看解析', value:1})
      }
      if (item.myResult.enableDelete == 1) {
        temObj.push({name:'删除', value:2})
      }
      this.operationMenu = temObj
      this.operationMenuLength = Object.keys(this.operationMenu).length
      this.showOprationSheet(index)
    },
    //日签绘制完成
    canvasOver() {
      this.isCanvasOver = true;
      getInfo = true
      //判断是否自动弹出日签，可以自动弹出日签并且没有自动弹出过，则显示日签
      if (this.homeWorkInfo.isShowCard == 1) {
        let pushHwId = curHwId * 1;
        if (pushHwId == 0 || this.curSelectDate != 0) {
          pushHwId = `${clockInId}/${this.curSelectDate}`;
        }
        let clockSignCardList = localStorage.getItem("clockSignCard");
        let cardSignList =
          (clockSignCardList && JSON.parse(clockSignCardList)) || [];
        if (cardSignList.includes(pushHwId)) {
          this.showSignDay = false;
        } else {
          cardSignList.length < 99999
            ? cardSignList.push(pushHwId)
            : cardSignList.shift();
          localStorage.setItem("clockSignCard", JSON.stringify(cardSignList));
          this.$loading.hide();
          this.showSignDay = true;
        }
      }
    },
    //关闭日签
    closeSignDay() {
      this.showSignDay = false;
    },
    //获取日签信息
    getSignDayInfo(lat, lon) {
      if (getInfo) {
        getInfo = false
        if (this.homeWorkInfo.isShowCard == 1) {
          let pushHwId = curHwId * 1;
          if (pushHwId == 0 || this.curSelectDate != '') {
            pushHwId = `${clockInId}/${this.curSelectDate}`;
          }
          let clockSignCardList = localStorage.getItem("clockSignCard");
          let cardSignList =
            (clockSignCardList && JSON.parse(clockSignCardList)) || [];
          clearInterval(this._getLocationtime)
          if (cardSignList.includes(pushHwId)) {
            this.showSignDay = false;
            getInfo = true
          } else {
            this.$loading.show({
              text: "日签生成中"
            });
            utilJs.getMethod(
              `${global.apiurl}signCard/showDayCard/${clockInId}?lat=${lat}&lon=${lon}`,
              (res) => {
                let dateArr = res.day.split("-");
                let monthTime = dateArr[1];
                let dayTime = dateArr[2];
                let cardCover = "";
                if (res.enableImgLoop) {
                  cardCover = res.cardCoverArr;
                } else {
                  cardCover = res.cardCover;
                }
                let info = {
                  fontColor: res.fontColor,
                  type: res.type,
                  name: res.name,
                  nickname: res.nickname,
                  word: res.word || [],
                  isDefaultWord: res.isDefaultWord,
                  cardCover:
                    cardCover ||
                    "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/daysign_img.png",
                  dateStr: monthTime + "月" + dayTime + "日",
                  city: res.city || "未知",
                  headimgurl:
                    res.headimgurl || require("../../../assets/defult_head.png"),
                  userId: res.userId,
                  hasWork: res.hasWork,
                  qrcodeUrl: res.qrcodeUrl,
                  allDay: res.allDay || 0,
                  hasSignDay: res.hasSignDay || 0,
                  isBackMoney: res.payType == 4 ? 1 : 0,
                  overPercent: res.overstep,
                  daySignType: res.daySignType || [],
                  daySignContent: res.daySignContent,
                  daySignShowData: res.daySignShowData,
                  dcStyleType: res.dcStyleType || 4,
                  enableDcWord: res.enableDcWord,
                  monthTime:monthTime,
                  dayTime:dayTime,
                  timeType: res.timeType,
                };
                this.signDayInfo = info;
                this.$refs.daysign.signDayInfoStart(this.signDayInfo)
              }
            );
          }
        }
      }
    },
    clickGohomeworke() {
      if (this.homeWorkInfo.isIn == 1) {
        let q = {
          workType: this.workType,
          clockInId: clockInId,
          fromDetail: 0,
        }
        if (this.workType == 1) {
          q.curDate = this.curSelectDate;
        }
        if (this.workType == 2 || this.workType == 3) {
          q.curId = q.curId = this.workType == 2 ? curHwId : (this.workType == 3 ? this.homeWorkInfo.lastHwId : '');
        }
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: `/homePage/clockIn/stuHomeWork`,
          query: q
        });
      } else {
        let q = {clockInId: clockInId}
        if (this.refereeId && this.refereeId != "undefined" && this.refereeId != "null") {
          q.refereeId = this.refereeId;
        }
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/clockInDetail",
          query: q
        });
      }
    },
    clickGoBack() {
      this.$router.go(-1);
    },
    clickImg(event) {
      event.preventDefault()
      return false
    },
    closeShowMasker() {
      this.isShowMasker = false;
    },
    // 生成长图
    clickBuildImg() {
      let that = this
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$loading.show({
        text: "长图生成中"
      });
      document.ontouchstart = null;
      document.ontuchmove = null;
      document.ontouchend = null;
      // this.canvasimg()
      this.homeWorkInfo.myResult.nickname = this.homeWorkInfo.myResult.nickname.length > 9 ? this.homeWorkInfo.myResult.nickname.substring(0, 9) + '...' : this.homeWorkInfo.myResult.nickname;
      this.homeWorkInfo.myResult.name = this.homeWorkInfo.myResult.name.length > 10 ? this.homeWorkInfo.myResult.name.substring(0, 10) + '...' : this.homeWorkInfo.myResult.name;
      let content = this.homeWorkInfo.myResult.content
      this.content = content.length > 1000 ? content.substring(0, 1000) + '...' : content
      this.$nextTick(() => {
        setTimeout(() => {
          // this.$loading.hide();
          that.canvas();
        }, 1000);
      });
      // }
    },
    canvasToImage1(ctx) {
      let that = this
      try {
        let dataURL = ctx.canvas.toDataURL("image/png", 1);
        document.querySelector("#imgContant").innerHTML = '';
        document.querySelector("#imgContant").innerHTML = '<img src="' + dataURL + '" class="c-w100 c-m-0auto" alt>'
        // document.getElementById("loneSpreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        setTimeout(() => {
          // this.$loading.hide();
          that.canvas();
        }, 1000);
      } catch (err) {
        that.$loading.hide();
      }
    },
    //下载图片
    downImg(imgUrl) {
      // let that = this;
      return new Promise(function (resolve, reject) {
        let img = new Image();
        if (!imgUrl.includes('base64')) {
          img.crossOrigin = "anonymous";
          let nowTimeTmp = Date.now();
          imgUrl = imgUrl.includes('?') ? `${imgUrl}&time=${nowTimeTmp}` : `${imgUrl}?time=${nowTimeTmp}`;
        }
        img.src = imgUrl;
        img.onload = function () {
          resolve(img);
        };
        img.onerror = function (e) {
          console.log("下载图片失败");
          console.log(imgUrl);
          reject(e);
        };
      });
    },
    canvas() {
      let domTest = document.getElementById("canvas1");
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight - 1, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
        letterRendering:true,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    setClinetHeight() {
      this.$nextTick(() => {
        let windowHeight = window.innerHeight;
        let fontSize = Number(document.documentElement.style.fontSize.replace(/px$/, ''));
        let topH = (200 / 40) * fontSize
        let spreadImgHeight = windowHeight - topH;
        document.querySelector("#loneSpreadImg").style.maxHeight = spreadImgHeight + 'px';
      })
    },
    canvasToImage(ctx) {
      try {
        let dataURL = ctx.canvas.toDataURL("image/jpg");
        document.querySelector("#loneSpreadImg").innerHTML = '';
        document.querySelector("#loneSpreadImg").innerHTML = '<img src="' + dataURL + '" class="c-ww500 c-m-0auto c-br20" alt>'
        // document.getElementById("loneSpreadImg").setAttribute("src", dataURL);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        this.setClinetHeight()
        setTimeout(() => {
          this.$loading.hide();
          this.isShowMasker = true;
        }, 1000);
      } catch (err) {
        this.$loading.hide();
      }
    },
    goSpread() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.shareBind) {
        if (utilJs.goBindMobile()) return;
      }
      this.$routerGo(this, "push", {
        path: "/homePage/spread/spreadCustom",
        query: {
          // socailId: this.socialInfo.socialRoomId
          ckFrom: global.ckFrom.clockIn,
          cId: 0,
          extId: clockInId
        }
      })
    },
    //获取打卡信息
    getClockInDatail() {
      let $this = this
      utilJs.getMethod(global.apiurl + "signCard/detail/" + clockInId, (res) => {
        if (res.isExist == 0) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "",
              info: "该打卡作业本已下架，请联系管理员！"
            }
          });
        } else {
          $this.clockInInfo = res;
          // $this.wechatShare();
        }
      }
      );
    },
    //点击重测
    clickTestAgain() {
      if (this.homeWorkInfo.type == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/simpleQue",
          query: {
            curHwId: curHwId,
            examMainId: this.homeWorkInfo.myResult.examMainId,
            clockId: clockInId,
            curDate: this.curSelectDate,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            ckFrom: this.ckFrom,
            workType:this.workType
          }
        });
      } else if (this.homeWorkInfo.type == 4) {
         //进入表单
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/clockForm",
          query: {
            curDate: this.curSelectDate,
            curHwId: curHwId,
            isReTest: 1,
            clockId: clockInId,
            examMainId: this.homeWorkInfo.myResult.examMainId,
            ttId: this.ttId, //营期ID
            tpId: this.tpId, //环节ID
            tlId: this.tlId, //课时ID
            ckFrom: this.ckFrom,
            workType:this.workType
          }
        });
      }
    },
    //点击查看解析
    clickLookAswer() {
      if (this.homeWorkInfo.type == 1) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/simpleQueResult",
          query: {
            curHwId: curHwId
          }
        });
      } else if (this.homeWorkInfo.type == 3) {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/voiceResult",
          query: {
            curHwId: curHwId,
            totalNum: this.homeWorkInfo.content,
            curDate: this.curSelectDate,
            examMainId: this.homeWorkInfo.myResult.examMainId,
            clockInId: clockInId,
            workType:this.workType
          }
        });
      } else {
        this.$routerGo(this, "push", {
          path: "/homePage/clockIn/homeWorkResult",
          query: {
            examMainId: this.homeWorkInfo.myResult.examMainId,
            isFromDetail: true,
            curDate: this.curSelectDate,
            workType:this.workType,
            clockInId: clockInId,
            curHwId : curHwId
          }
        });
      }
    },
    //获取作业本信息
    getHomeWorkDatail() {
      let getUrl = this.refereeAndUser ? `signCard/homeworkDetail/${curHwId}?isTraining=${this.isTraining}&hasRead=${hasRead}&refereeId=${this.refereeId}&curHwId=${curHwId}&examMainId=${this.examMainId}&time=` + new Date().getTime() :
      `signCard/shortAnswerSheetHomework/${curHwId}?isTraining=${this.isTraining}&hasRead=${hasRead}&refereeId=${this.refereeId}&curHwId=${curHwId}&examMainId=${this.examMainId}&time=` + new Date().getTime()
      utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
          if (!res && this.refereeAndUser) {
            this.$routerGo(this, "replace", {
              path: "/homePage/clockIn/clockInDetail",
              query: {
                clockInId: clockInId
              }
            });
            return;
          }
          if (this.isShare && !this.refereeAndUser) {
            this.homeWorkInfo = res.resultInfo
          } else {
            this.homeWorkInfo = res;
          }
          if (!this.homeWorkInfo.myResult) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "clockIn",
                clockInId:clockInId,
                info: "该作业不存在！"
              }
            });
            return;
          }
          //判断签到信息是否为空
          if (
            Object.keys(this.signDayInfo).length == 0 &&
            this.homeWorkInfo.dayCardStatus == 1 && this.refereeAndUser
          ) {
            setTimeout(() => {
              this.getlocationpoint();
            }, 1000);
          }
          this.wechatShare();
        }
      );
    },
    //获取日历打卡信息
    getCalendarHomeWork() {
      let getUrl = this.refereeAndUser ? `${global.apiurl}signCard/themeDetail?signColId=${clockInId}&day=${this.curSelectDate}&hasRead=${hasRead}&refereeId=${this.refereeId}&curHwId=${curHwId}&examMainId=${this.examMainId}&time=` + new Date().getTime() :
      `${global.apiurl}signCard/shortAnswerSheetTheme?signColId=${clockInId}&day=${this.curSelectDate}&hasRead=${hasRead}&refereeId=${this.refereeId}&curHwId=${curHwId}&examMainId=${this.examMainId}&time=` + new Date().getTime()
      utilJs.getMethod(
        getUrl,
        (res) => {
          if (!res && this.refereeAndUser) {
            this.$routerGo(this, "replace", {
              path: "/homePage/clockIn/clockInDetail",
              query: {
                clockInId: clockInId
              }
            });
            return;
          }
          if (!res.resultInfo.myResult) {
            this.$routerGo(this, "replace", {
              path: "/error/emptyPage",
              query: {
                from: "clockIn",
                clockInId:clockInId,
                info: "该作业不存在！"
              }
            });
            return
          }
          if (this.refereeAndUser) {
            curHwId = res.headInfo.hwId || 0;
          }
          this.homeWorkInfo = {
            isDisAgainSign: res.resultInfo.isDisAgainSign,
            name: res.resultInfo.name || "",
            isExpire: res.resultInfo.isExpire,
            myResult: res.resultInfo.myResult,
            userId: res.resultInfo.userId,
            nickname: res.resultInfo.nickname,
            isTeacher: res.resultInfo.isTeacher,
            isReachTarget: 1,
            homeWorkName:res.headInfo ? res.headInfo.homeWorkName : res.resultInfo.homeWorkName,
            type: res.headInfo ? res.headInfo.type : res.resultInfo.myResult.type,
            isIn:res.resultInfo.isIn,
            isOpenLongPic:res.resultInfo.isOpenLongPic,
            lastHwId:res.resultInfo.lastHwId,
            curUserId:res.resultInfo.curUserId,
            isShowCard:res.resultInfo.isShowCard,
            isAnalyze:res.resultInfo.isAnalyze,
            daySignShowData:res.resultInfo.daySignShowData,
            enableShow:res.resultInfo.enableShow,
            enableShow2:res.resultInfo.enableShow2,
          };
          this.mySignList = res.calendar;
          //判断签到信息是否为空
          if (
            Object.keys(this.signDayInfo).length == 0 &&
            res.resultInfo.dayCardStatus == 1 && this.refereeAndUser
          ) {
            this.$nextTick(() => {
              this.getlocationpoint();
            });
          }
          this.wechatShare();
        }
      );
    },
    //获取地理位置
    getlocationpoint() {
      clearInterval(this._getLocationtime)
      if (this.homeWorkInfo.daySignShowData.isShowArea == 0 || utilJs.isAndroidApp() || utilJs.isIOSAppALL()) {
        this.getSignDayInfo("", "");
        return;
      }
      console.log(1111111111111111)
      this._getLocationtime = setTimeout(() => {
        this.getSignDayInfo("", "");
      }, 2000);
      wxUtilJs.getLocation().then(
        (res) => {
          this.getSignDayInfo(res.latitude, res.longitude);
        },
        (failRes) => {
          this.getSignDayInfo("", "");
        }
      );
    },
    //点赞
    clickZan(index) {
      if (isLoading) {
        return;
      }
      isLoading = true;
      //点赞自己
      let zanType = 0;
      let examMainId = "";
      // if (index == -1) {
        zanType = this.homeWorkInfo.myResult.hasZan == 1 ? 2 : 1;
        examMainId = this.homeWorkInfo.myResult.examMainId;
      // } else {
      //   zanType = this.studentWorkList[index].hasZan == 1 ? 2 : 1;
      //   examMainId = this.studentWorkList[index].examMainId;
      // }

      utilJs.getMethod(
        `${global.apiurl}signCard/clickZan/${examMainId}?zanType=${zanType}`,
        (res) => {
          isLoading = false;
          if (res.status == 1) {
            this.$showCjToast({
              text: zanType == 1 ? "点赞成功" : "取消点赞",
              type: "success",
              time: 1500
            });
            //点赞自己
            // if (index == -1) {
              this.$set(
                this.homeWorkInfo.myResult,
                "hasZan",
                zanType == 2 ? 0 : 1
              );
              if (zanType == 1) {
                this.homeWorkInfo.myResult.zanMan.push({
                  nickname: res.nickname,
                  userId:res.userId
                });
              } else {
                let zanArr = this.homeWorkInfo.myResult.zanMan.filter((item) => {
                  return item.userId != res.userId;
                });
                this.$set(this.homeWorkInfo.myResult, "zanMan", zanArr);
              }
            // } else {
            //   //点赞别人
            //   this.$set(
            //     this.studentWorkList[index],
            //     "hasZan",
            //     zanType == 2 ? 0 : 1
            //   );
            //   if (zanType == 1) {
            //     this.studentWorkList[index].zanMan.push({
            //       nickname: res.nickname,
            //       userId:res.userId
            //     });
            //   } else {
            //     let zanArr = this.studentWorkList[index].zanMan.filter((item) => {
            //       return item.userId != res.userId;
            //     });
            //     this.$set(this.studentWorkList[index], "zanMan", zanArr);
            //   }
            // }
          } else if (res.status == 2) {
            this.$showCjToast({
              text: res.message,
              type: "warn",
              time: 1500
            });
          } else {
            this.$showCjToast({
              text: '操作失败',
              type: "warn",
              time: 1500
            });
          }
        },
        (failRes) => {
          isLoading = false;
        }
      );
    },
    /**
    /**
     * 点击评论
     * index： -1 评论自己，其他:评论别人
     * cIndex： -1 评论别人的内容，其他：评论别人的评论
     */
    clickCom(index, cIndex, commentId, myAswerIndex, isTeacher) {
      console.log(index, cIndex, this.homeWorkInfo.isTeacher, isTeacher)
      if (cIndex == -1 && (this.homeWorkInfo.isTeacher == 1 || this.homeWorkInfo.isTeacher == 2) && isTeacher) {
        curComIndex = index;
        this.resultInfo = this.homeWorkInfo.myResult;
        this.resultIndex = myAswerIndex;
        this.showTeaCommentModal = true;
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        this.enHwId = this.homeWorkInfo.myResult.hwId
        this.enDate = this.homeWorkInfo.myResult.startDay
        return;
      }
      let examMainId = "";
      if (cIndex != -1) {
        this.comType = this.homeWorkInfo.myResult.commentArr[cIndex].type;
      }
      examMainId = this.homeWorkInfo.myResult.examMainId;
      this.replyId =
        cIndex == -1
          ? ""
          : this.homeWorkInfo.myResult.commentArr[cIndex].userId;
      this.replyName =
        cIndex == -1
          ? ""
          : this.homeWorkInfo.myResult.commentArr[cIndex].nickname;
      this.enHwId = this.homeWorkInfo.myResult.hwId
      this.enDate = this.homeWorkInfo.myResult.startDay
      curComIndex = index;
      if (this.curComId != examMainId) {
        this.inputCom = "";
      }
      this.curComId = examMainId;
      this.showComInput = true;
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    //评论成功
    commentSuccess(comData, type) {
      let content = {
        type: comData.type,
        content: comData.content,
        nickname: comData.nickname,
        replyName: this.replyName,
        replyUserId: this.replyId,
        userId: this.homeWorkInfo.userId,
        imgArr: comData.imgArr,
        audioArr: comData.audioArr,
        videoArr: comData.videoArr || [],
        headimgurl:comData.headimgurl,
        commentId:comData.commentId,
        encodeUserId:localStorage.getItem("userId"),
        createdAt:comData.commentTime,
      };
      this.playAduioSrc = "";
      if (curComIndex == -1) {
        //评论自己
        this.homeWorkInfo.myResult.commentArr.push(content);
      } else {
        //评论别人
        if (comData.teacherCom) {
          //老师点评
          this.$set(this.homeWorkInfo.myResult, "isHot", comData.isHot);
          this.$set(this.homeWorkInfo.myResult, "rank", comData.rank);
          // this.$set(this.homeWorkInfo.myResult, "createdAt", comData.commentTime);
        }
        // if (comData.teacherCom && this.sortType == 5) {
        //   //老师点评，当前类型是未点评，则把当前点评的这条数据移除掉
        //   this.studentWorkList.splice(curComIndex, 1);
        // } else {
          this.homeWorkInfo.myResult.commentArr.push(content);
        // }
      }
      this.showTeaCommentModal = false;
      this.showComInput = false;
      this.replyName = "";
      this.inputCom = "";
      this.replyId = "";
      if (type == 1) {
        if (this.workType == 1) {
          this.getCalendarHomeWork();
        } else {
          this.getHomeWorkDatail();
        }
      }
    },
    // 点击开始播放音频
    clickPlayAudio(audioUrl) {
      if (this.playAduioSrc == audioUrl) {
        this.playAduioSrc = "";
        document.getElementById("audio").src = this.playAduioSrc;
        return;
      }
      this.playAduioSrc = audioUrl;

      //返回mp3则用audio播放
      if (this.playAduioSrc) {
        document.getElementById("audio").src = this.playAduioSrc;
        //document.getElementById("audio").play();
        utilJs.audioPlayFun(document.getElementById("audio"), "play");
      }
    },

    // //监听音频播放结束执行的内容
    playAudioEnd() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    // //点击显示视频
    clickShowVideo(videoSrc, m3u8Url) {
      this.showVideo = true;
      this.currentVideoObj = {videoSrc, m3u8Url}
    },
    //点击关闭视频
    clickCloseVideo() {
      if (this.showVideo) {
        this.showVideo = false;
      }
    },
    cleanPlayAudioUrl() {
      this.playAduioSrc = "";
      document.getElementById("audio").src = this.playAduioSrc;
    },
    wechatShare: function () {
      let title = this.homeWorkInfo.myResult.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?curHwId=${curHwId}&examMainId=${this.examMainId}&curSelectDate=${this.curSelectDate}&clockInId=${clockInId}&isShare=1&workType=${this.workType}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.wechatConfig(
        shareIndexData.shareUrl,
        shareIndexData.title,
        shareData.shareImg,
        shareData.shareDesc,
        function () { },
        true
      );
    },
    //手机端分享https://kptest.ckjr001.com/kpv2p/lj7l/#/homePage/clockIn/shortAnswerResult?clockInId=1105518&refereeId=7r63ozwl&curHwId=37567&curSelectDate=2022-06-14&workType=1&isShare=1&examMainId=3347447
    appShare: function () {
      let title = this.homeWorkInfo.myResult.nickname + '的打卡日记'
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareDesc = window.localStorage.getItem("shareDesc");
      // https://kptest.ckjr001.com/kpv2p/lj7l/?#/homePage/clockIn/clockInDetail?clockInId=1107714
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?curHwId=${curHwId}&examMainId=${this.examMainId}&curSelectDate=${this.curSelectDate}&clockInId=${this.clockInId}&isShare=1&workType=${this.workType}&refereeId=${localStorage.getItem("userId")}`
      // let shareUrl = `${window.location.href.split("#")[0]}#/homePage/clockIn/clockInDetail?clockInId=${clockInId}&refereeId=${localStorage.getItem("userId")}`
      let shareIndexData = {
        shareUrl,
        title,
        shareImg,
        shareDesc,
      };
      let shareData = localStorage.getItem("homeWorkShare") ? JSON.parse(localStorage.getItem("homeWorkShare")) : shareIndexData;
      utilJs.appShareTrue(
        shareIndexData.title,
        shareData.shareImg,
        shareIndexData.shareUrl,
        shareData.shareDesc
      );
    }
  },
  destroyed () {
    console.log(456789)
    this.$loading.hide();
    this.$destroy('DaySign');
    this.showSignDay = false;
    this.isShowMasker = false
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-maxh1040{
  max-height: 26rem;
}
.anvasBox{
  width: 640px;
  height: 984px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  position: absolute;
}
.anvasContent{
  width: 500px;
  /* background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/short_answer.png"); */
  background-size: 100% 100%;
  position: relative;
}
.anvasContentbg{
  /* background: url("https://ck-bkt-knowledge-payment.oss-cn-hangzhou.aliyuncs.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/imglong.png"); */
  background-size: cover;
  background-repeat-y: repeat;
}
.anvasContentbg2{
  display: none;
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/short_answer.png");
  background-size: 100% 100%;
}
.bgLocation {
  padding-top:120px
}
.dialog-demo /deep/ .weui-dialog{
  background-color: transparent;
}
.c-p-tm12{
  top: -1.2rem;
}
.c-p-rm12{
  right: -1.2rem;
}
.c-maxhlongImg{
  max-height: 20rem;
}
.img-play-btn {
    position: absolute;
    top: 0;
    background-color: rgba(0,0,0,0.2);
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
